<template>
    <div class="three-demo">
        <canvas ref="threeCanvas"></canvas>
    </div>
</template>

<script setup name="ThreeDemo">
import { onMounted, ref } from 'vue';
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const threeCanvas = ref(null);

onMounted(() => {
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer({ canvas: threeCanvas.value });
    renderer.setSize(window.innerWidth, window.innerHeight);

    const controls = new OrbitControls(camera, renderer.domElement);
    // controls.target.copy(scene.position);
    //     controls.enablePan = true;// 允许右键拖拽
    //     controls.enableZoom = false;//允许缩放--走鼠标事件统一
    //     controls.enableRotate = true;//允许旋转
    //     controls.maxDistance = 1;// 缩放最小(相机最大距离)
    //     controls.minDistance = 10;// 缩放最大
    //     controls.maxPolarAngle = Math.PI / 2;// 上旋转

    const group = new THREE.Group();
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.set(2, 0, 1);
    console.log(group)
    scene.add(cube)

    const geometry2 = new THREE.SphereGeometry(1, 10, 10);
    // 创建材质
    const material2 = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    // 使用几何体和材质创建球体
    const sphere = new THREE.Mesh(geometry2, material2);


    let canvas = document.createElement("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    let ctx = canvas.getContext("2d");
    ctx.fillStyle = "#000";
    ctx.font = "Bold 100px 宋体";
    ctx.lineWidth = 4;
    ctx.fillText("精灵中文字体", 4, 104);
    let texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    var textMaterial = new THREE.SpriteMaterial({
        map: texture,
        alphaTest: 0.1, // 调整alphaTest阈值
        transparent: true,
        opacity: 1,
    });
    let text = new THREE.Sprite(textMaterial);
    // text.scale.set(50, 50, 50);
    text.position.set(0, 0, 1);

    group.add(sphere)
    group.add(text)
    scene.add(group)

    camera.position.z = 5;

    const animate = function () {
        requestAnimationFrame(animate);
        // console.log(camera.quaternion)

        // cube.rotation.x += 0.01;
        // cube.rotation.y += 0.01;
        // updateSpritePosition(cube, text)
        // 获取相机的旋转角度
        const cameraRotation = camera.rotation;

        // 根据相机的旋转角度调整节点的旋转
        // group.rotation.y = cameraRotation.y;
        // group.rotation.x = cameraRotation.x;
        group.lookAt(camera.position)
        // controls.update()

        renderer.render(scene, camera);
    };

    animate();

    function updateSpritePosition(
        target,
        sprite,
        offset = new THREE.Vector3(0, 0, 1),
    ) {
        sprite.position.copy(target.position).add(offset);
    }
})
</script>

<style scoped>
.three-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f0f0;
}

canvas {
    display: block;
}
</style>